import React from 'react'
import { g,sty } from '../../tool'

export default class Button extends React.PureComponent {
    static defaultProps = {
        normalColor:'#8888FF',
        normalBorderColor:'rgba(0,0,0,0)',  //5F5FFF
        highLightColor:'#6565FF',
        highLightBorderColor:'rgba(0,0,0,0)', //'#5656D6',
        disbleColor:'#D6D6DC',
        disbleBorderColor:'rgba(0,0,0,0)', //'#BBBBBB',
        textColor:'#fff',
    }
    constructor(props) {
        super(props)
        this.state = {
            nowColor: this.props.normalColor,
            nowBorderColor:this.props.normalBorderColor,
        }
    }
    render() {
        let {normalColor, normalBorderColor, highLightColor, highLightBorderColor, disbleColor, disbleBorderColor, textColor, style, event, ...rest} = this.props
        let {nowColor, nowBorderColor} = this.state
        let rootProps = {
            style: {
                ...sty.box('h'),
                backgroundColor:nowColor,
                borderColor:nowBorderColor,
                borderWidth:0,
                borderStyle:'solid',
                fontSize:g.px(30),
                paddingTop:g.px(16),
                paddingBottom:g.px(16),
                fontWeight:400,
                ...sty.btn(),
                color: textColor,
                ...style
            },
            onTouchStart:this.handleTouchStart,
            onTouchEnd:this.handleTouchEnd,
            onMouseDown:this.handleTouchStart,
            onMouseUp:this.handleTouchEnd,
            ...rest
        }
        return (
            <div {...rootProps} >
                {this.props.children}
            </div>
        )
    }
    handleTouchStart = ()=>{
        this.setState({
            nowColor: this.props.highLightColor,
            nowBorderColor:this.props.highLightBorderColor,
        })  
    }
    handleTouchEnd = ()=>{
        this.setState({
            nowColor: this.props.normalColor,
            nowBorderColor:this.props.normalBorderColor,
        })
    }
}